import React from 'react';
import { Button } from 'antd';
import { Link, withRouter, routerRedux } from 'dva/router';
// 使用withRouter的话，就不需要用this.props.history传递参数了
// import * as api from '../services/example'
import { productUpdateList, productUpdateListAsync, productUpdateListHttp, getOrganization } from '../actions'

class Product extends React.Component {
  componentDidMount() {
    // api.getApiUsers().then(res => {
    //   console.log(res)
    // })
    // this.props.dispatch(productUpdateListHttp());
    this.props.dispatch(getOrganization(10));
  }

  render() {
    const { title, productList } = this.props;
    // console.log(productList);
    return (
      <div>
        Product Component: {title}
        <ul>
          {
            productList.map((item, index) => {
              return <div key={index}>{item.organization_name}</div>
            })
          }
        </ul>
        <div>
          <Button type="primary" onClick={this.clickAddProduct}>添加商品</Button>
          <Button type="primary" onClick={this.clickAddProductAsync}>添加商品Async</Button>
          <Button type="primary" onClick={this.clickAddProductHttp}>异步获取项目部</Button>
        </div>
        <div>
          <Link to="/">Link到首页</Link>
          <Button type="danger" onClick={this.clickGoHome}>首页</Button>
          <Button type="primary" onClick={this.clickGoHomeRedux}>首页Redux</Button>
        </div>

      </div>
    )
  }

  clickAddProduct = (event) => {
    const newProduct = {
      name: '黄豆'
    }
    // this.props.dispatch({
    //   type: 'product/updateList',
    //   payload: newProduct
    // })
    this.props.dispatch(productUpdateList(newProduct));
  }

  clickAddProductAsync = (event) => {
    const newProduct = {
      name: '南瓜'
    }
    // this.props.dispatch({
    //   type: 'product/updateListAsync',
    //   payload: newProduct
    // })
    this.props.dispatch(productUpdateListAsync(newProduct));
  }

  clickAddProductHttp = (event) => {
    this.props.dispatch(productUpdateListHttp())
  }

  clickGoHome = (event) => {
    this.props.history.push('/')
  }

  clickGoHomeRedux = (event) => {
    this.props.dispatch(routerRedux.push('/'))
  }
}

export default withRouter(Product)
